

<template>

  <div class="hello">

      <div style="position: fixed;bottom: 0; width: 100%"> 


         <tabbar  v-model="index"   style="background-color: #4d0572;" >

            <tabbar-item  @on-item-click="change">
              <i slot="icon" class="iconfont icon-home" v-bind:class="{ active: index!=0 }"></i>
              <span slot="label" v-bind:class="{ active: index!=0 }">首页</span>
            </tabbar-item >
            <tabbar-item  @on-item-click="change">
              <i slot="icon" class="iconfont icon-member" v-bind:class="{ active: index!=1 }"></i>
              <span slot="label" v-bind:class="{ active: index!=1 }">会员</span>
            </tabbar-item>
            <tabbar-item  :badge="bage" @on-item-click="change">
              <i slot="icon" class="iconfont icon-xiaoxi2" v-bind:class="{ active: index!=2 }"></i>
              <span slot="label" v-bind:class="{ active: index!=2 }">消息</span>
            </tabbar-item>
            <tabbar-item  @on-item-click="change">
              <i slot="icon" class="iconfont icon-shop" v-bind:class="{ active: index!=3 }"></i>
              <span slot="label" v-bind:class="{ active: index!=3 }">已购</span>
           </tabbar-item>

           <tabbar-item  @on-item-click="change">
              <i slot="icon" class="iconfont icon-personal" v-bind:class="{ active: index!=4 }"></i>
              <span slot="label" v-bind:class="{ active: index!=4 }">我的</span>
           </tabbar-item>

          </tabbar>
    

       </div>
    
  </div>

</template>

<script>

import { Tabbar, TabbarItem } from 'vux'



export default {

  components: {
    Tabbar,
    TabbarItem
  },
  data () {
    return {
      bage: '8',
      index: 0,
    
    }
  },
  methods:{
     
     change:function(){

       // this.bage=this.$store.state.num.toString();
       this.$store.state.selectIndex = this.index;
  
       if(this.index== 0){
  
          this.$router.push({ path: '/'});
    
       }else if(this.index == 1){

          this.$router.push({ path: '/upgrade'});
    
       }else if(this.index == 4){

          this.$router.push({ path: '/user'});
    
       }else if(this.index == 2){

          this.$router.push({ path: '/newsDetail'});
    
       }else if(this.index == 3){

          this.$router.push({ path: '/bought'});
    
       }

     }
    
  },

  beforeMount () {

    this.index=this.$store.state.selectIndex;
    this.bage = this.$store.state.bage;

  }
  

}



</script>


<style lang="less" scoped>

  .active{
    color: white;
  }


</style>
